<template>
    <div class="page-design-page">
        <div class="page-header" v-if="!detailRequest.loading.value">
            <div class="title">{{ detail.displayName }}</div>
            <el-button :icon="Document" type="primary" size="small" @click="onSave()" :loading="request.loading.value">
                保存
            </el-button>
            <el-button :icon="VideoPlay" size="small" @click="onPreview"> 预览 </el-button>
            <el-button size="small" @click="onSave(true)" :disabled="request.loading.value"> 保存并关闭 </el-button>
        </div>
        <div class="page-body">
            <UIDesignerBuilder ref="builderRef" :ui-schema="uiSchema" v-if="!detailRequest.loading.value" />
            <img class="loading" src="../../../assets/images/loading.svg" v-else alt="" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { DEFAULT_SCHEMA, type FullSchema, UIDesignerBuilder, type UIDesignerBuilderInstance } from '@great/designer';
import { Document, VideoPlay } from '@element-plus/icons-vue';
import { viewService } from '@great/services';
import { useRequest } from 'vue-request';
import { useRoute } from 'vue-router';
import { cloneDeep } from 'lodash-es';
import { showPopupBox, tryJsonParse, useHotKeys } from '@great/utils';
import PreviewModal from '@/pages/model/page/components/PreviewModal.vue';

const route = useRoute();
const detail = ref<any>({});
const uiSchema = ref<FullSchema>();
const builderRef = ref<UIDesignerBuilderInstance>();
const detailRequest = useRequest(
    () => {
        return viewService.getDetailByCode(route.params.code as string);
    },
    {
        onSuccess: res => {
            detail.value = res.data;
            uiSchema.value = tryJsonParse(res.data.jsonSchema, cloneDeep(DEFAULT_SCHEMA));
        }
    }
);

const request = useRequest(
    () => {
        return viewService.update({
            ...detail.value,
            jsonSchema: JSON.stringify(builderRef.value?.getFullSchema())
        });
    },
    {
        manual: true
    }
);

async function onSave(close = false) {
    const message = ElMessage.primary({
        message: '正在保存...',
        duration: 0
    });
    try {
        await request.runAsync();
        ElMessage.success({ message: '保存成功', duration: 1000, grouping: true });
    } finally {
        message.close();
    }
    if (close) window.close();
}

function onPreview() {
    showPopupBox(PreviewModal, {
        uiSchema: uiSchema.value!
    });
}
useHotKeys('Control+S', () => {
    if (!request.loading.value) {
        onSave();
    }
});
useHotKeys('Control+P', onPreview);
if (import.meta.env.MODE === 'dev') {
    watch(
        uiSchema,
        value => {
            console.log(uiSchema.value);
        },
        {
            immediate: true,
            deep: true
        }
    );
}
</script>
<style scoped lang="scss">
.page-design-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
    .page-header {
        padding: 0 10px;
        height: 40px;
        display: flex;
        align-items: center;
        width: 100%;
        .title {
            margin-right: auto;
            font-size: 14px;
            font-weight: 600;
        }
    }
    .page-body {
        flex: 1;
        height: 0;
        width: 100%;
        :deep(.layout) {
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
    & .loading {
        position: absolute;
        width: 40px;
        left: 50%;
        top: 50%;
    }
}
</style>
<style>
body:has(.page-design-page) {
    overflow: hidden;
}
</style>
